<template>
  <a-flex vertical gap="small" style="height: 100%">
    <a-flex vertical>
      <a-menu v-model:selectedKeys="activeTab" mode="horizontal" style="width: 100%">
        <a-menu-item key="password">密码</a-menu-item>
        <a-menu-item key="timeStamp">时间戳</a-menu-item>
      </a-menu>
    </a-flex>
    <a-flex flex="1">
      <a-card v-if="activeTab[0] === 'password'" style="height: 100%; width: 100%">
        <a-flex vertical gap="middle" style="height: 100%">
          <a-flex gap="large">
            <a-flex align="center" gap="small">
              <label>长度:</label>
              <a-input size="small" v-model:value="pLength" style="width: 50px" maxlength="2" />
            </a-flex>

            <a-flex align="center" gap="small">
              <label>生成数量:</label>
              <a-input size="small" v-model:value="pCount" style="width: 50px" maxlength="2" />
            </a-flex>
          </a-flex>

          <a-flex gap="small" align="center">
            <a-checkbox v-model:checked="numCheckboxChecked">数字</a-checkbox>
            <label>0123456789</label>
          </a-flex>
          <a-flex gap="small" align="center">
            <a-checkbox v-model:checked="lowercaseLettersChecked">小写字母</a-checkbox>
            <label>abcdefghijklmnopqrstuvwxyz</label>
          </a-flex>

          <a-flex gap="small" align="center">
            <a-checkbox v-model:checked="upperCaseChecked">大写字母</a-checkbox>
            <label>ABCDEFGHIJKLMNOPQRSTUVWXYZ</label>
          </a-flex>

          <a-flex gap="small" align="center">
            <a-checkbox v-model:checked="specialSymbolsChecked">特殊符号</a-checkbox>
            <label>~!@#$%^&*()_+.[]{};',./?</label>
          </a-flex>

          <a-flex align="center" gap="small">
            <label>排除字符:</label>
            <a-input
              v-model:value="excludeCharacters"
              size="small"
              style="width: 200px"
              maxlength="20"
            />
          </a-flex>

          <a-flex gap="middle">
            <a-button type="primary" @click="randomPasswords">生成</a-button>
            <a-button type="primary" @click="copyRandomPasswords">复制结果</a-button>
            <a-button type="primary" danger @click="clearRandomPasswords">清空</a-button>
          </a-flex>

          <a-flex flex="1">
            <a-textarea v-model:value="passwordContents" style="height: 100%; resize: none">
            </a-textarea>
          </a-flex>
        </a-flex>
      </a-card>
      <a-card v-if="activeTab[0] === 'timeStamp'" style="height: 100%; width: 100%">
        <a-flex vertical gap="middle" style="height: 100%">
          <a-flex align="center" gap="small">
            <label class="inputName">时间:</label>
            <a-input v-model:value="timeNowStr" style="color: #1b6ee3; width: 300px" size="small"></a-input>
          </a-flex>
          <a-flex align="center" gap="small">
            <label class="inputName">时间戳:</label>
            <a-input v-model:value="timeStampNowStr" style="color: #1b6ee3; width: 300px" size="small"></a-input>
          </a-flex>
          <a-flex align="center" gap="small">
            <label class="inputName">时间戳:</label>
            <a-input size="small" v-model:value="timeStampNumInput" style="width: 300px" maxlength="15" />
            <a-select ref="select" v-model:value="timeToTimeStampType" style="width: 100px" size="small">
              <a-select-option value="1">毫秒(ms)</a-select-option>
              <a-select-option value="2">秒(s)</a-select-option>
            </a-select>
            <a-button type="primary" @click="timeStampToTime">转换</a-button>
            <a-input size="small" v-model:value="timeStrResult" style="width: 300px" maxlength="15" />
          </a-flex>
          <a-flex align="center" gap="small">
            <label class="inputName">时间:</label>
            <a-input size="small" v-model:value="timeStrInput" style="width: 300px" maxlength="50" />
            <a-select ref="select" v-model:value="timeStampToTimeType" style="width: 100px" size="small">
              <a-select-option value="1">毫秒(ms)</a-select-option>
              <a-select-option value="2">秒(s)</a-select-option>
            </a-select>
            <a-button type="primary" @click="timeToTimeStamp">转换</a-button>
            <a-input size="small" v-model:value="timeStampNumResult" style="width: 300px" maxlength="15" />
          </a-flex>
        </a-flex>

      </a-card>
    </a-flex>
  </a-flex>
</template>
<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { message } from "ant-design-vue";

const timeStampNumInput = ref()
const timeStampNumResult = ref()
const timeStrInput = ref()
const timeStrResult = ref()
const timeToTimeStampType = ref("1")
const timeStampToTimeType = ref("1")
const timeNowStr = ref(new Date().toLocaleString())
const timeStampNowStr = ref(Math.floor(Date.now() / 1000))

// 初始化时间戳和时间的实时更新
onMounted(() => {
  const timer = setInterval(() => {
    timeNowStr.value = new Date().toLocaleString()
    timeStampNowStr.value = Math.floor(Date.now() / 1000)
  }, 1000)

  // 清除定时器
  onUnmounted(() => clearInterval(timer))
})

// 时间转时间戳
const timeToTimeStamp = () => {
  const timeStr = timeStrInput.value
  if (!timeStr) {
    message.error('请输入有效的时间', 3)
    return
  }
  const date = new Date(timeStr)
  if (isNaN(date.getTime())) {
    message.error('时间格式不正确，请输入类似 "YYYY-MM-DD HH:mm:ss" 的格式', 3)
    return
  }

  let timeStamp
  if (timeToTimeStampType.value === "1") {
    timeStamp = date.getTime() // 毫秒级时间戳
  } else {
    timeStamp = Math.floor(date.getTime() / 1000) // 秒级时间戳
  }

  timeStampNumResult.value = timeStamp
}

// 时间戳转时间
const timeStampToTime = () => {
  const timeStamp = parseInt(timeStampNumInput.value, 10)
  if (isNaN(timeStamp)) {
    message.error('请输入有效的时间戳', 3)
    return
  }

  let date
  if (timeStampToTimeType.value === "1") {
    date = new Date(timeStamp) // 毫秒级时间戳
  } else {
    date = new Date(timeStamp * 1000) // 秒级时间戳
  }

  timeStrResult.value = date.toLocaleString()
}

const activeTab = ref(['password'])
const pLength = ref('16')
const pCount = ref('3')
const numCheckboxChecked = ref('checked')
const lowercaseLettersChecked = ref('checked')
const upperCaseChecked = ref('checked')
const specialSymbolsChecked = ref('checked')
const excludeCharacters = ref('')
const passwordContents = ref('')
const randomPasswords = () => {
  const length = parseInt(pLength.value, 10) || 16; // 默认长度为16
  const count = parseInt(pCount.value, 10) || 3; // 默认生成数量为3
  const includeNumbers = numCheckboxChecked.value;
  const includeLowercase = lowercaseLettersChecked.value;
  const includeUppercase = upperCaseChecked.value;
  const includeSpecial = specialSymbolsChecked.value;
  const excludeChars = excludeCharacters.value || '';

  const charSets = [];
  if (includeNumbers) charSets.push('0123456789');
  if (includeLowercase) charSets.push('abcdefghijklmnopqrstuvwxyz');
  if (includeUppercase) charSets.push('ABCDEFGHIJKLMNOPQRSTUVWXYZ');
  if (includeSpecial) charSets.push('~!@#$%^&*()_+.[]{};\',./?');

  const allChars = charSets.join('').split('').filter(char => !excludeChars.includes(char)).join('');
  if (allChars.length === 0) {
    message.error('至少选择一种字符类型', 3);
    return;
  }

  const generatePassword = () => {
    let password = '';
    for (let i = 0; i < length; i++) {
      password += allChars[Math.floor(Math.random() * allChars.length)];
    }
    return password;
  };

  const passwords = Array.from({ length: count }, generatePassword);
  passwordContents.value = passwords.join('\n');
};

const copyRandomPasswords = () => {
  navigator.clipboard
    .writeText(passwordContents.value)
    .then(() => {
      message.success('已复制到粘贴板!', 3)
    })
    .catch((error) => {
      console.error('复制失败:', error)
      message.error('复制失败，请重试', 3)
    })
}
const clearRandomPasswords = () => {
  passwordContents.value = ""
}
</script>

<style scoped>
.ant-card :deep() {
  border-radius: 0 !important;
}

.ant-card-bordered :deep() {
  border: 0;
}

.ant-card :deep(.ant-card-body) {
  height: 100%;
}

.ant-input :deep() {
  border-radius: 0 !important;
}

.inputName{
  width: 50px;
}

</style>
